<script setup lang="ts" name="sidebar">
import { reactive } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter();

const barData = reactive([
    {
        id: 1,
        title: '色彩&色阶',
        icon: 'icon-Colors',
        route: 'startStudy-color'
    },
    {
        id: 2,
        title: 'scss技巧',
        icon: 'icon-scss',
        route: 'startStudy-scss'
    },
    {
        id: 3,
        title: 'Vue组件设计',
        icon: 'icon-zujian',
        route: 'startStudy-VueComponent'
    }
])
</script>

<template>
    <div class="sidebar">
        <div 
        class="item" 
        :class="{ active: router.currentRoute.value.name === value.route }" 
        v-for="value in barData" 
        @click="router.push({ name: value.route })" 
        :key="value.id">
            <div class="left">
                <span :class="'iconfont' + ' ' + value.icon"></span>
                <span>{{ value.title }}</span>                
            </div>
            <div class="right">
                <span class="iconfont icon-youshang"></span>                
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use "./font/iconfont.css";
@use "@/assets/styles/colorVar.scss" as *;
@use "sass:list" as list;

.sidebar{
    position: sticky;
    top: 60px;
    width: 200px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    align-items: center;
    border-radius: 10px;
    background-color: list.nth($color-level, 2);
    color: $color-primary-font;
    user-select: none;
    .item{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding:10px 10px 10px 25px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        .left{
            display: flex;
            align-items: center;
            column-gap: 10px;
        }
        &:hover{
            border-radius: 10px;
            color: list.nth($color-level, 5);
            background-color: list.nth($color-level, 3);
        }
        .right{
            transition: all 0.5s ease-in-out;
        }
    }
    .active{
        border-radius: 10px;
        box-shadow: 0 0 10px 0px rgba(list.nth($color-level, 5), 0.6);
        color: list.nth($color-level, 5);
        background-color: list.nth($color-level, 3);
        .right{
            transform: translateX(25px) rotate(180deg);
        }
    }
}

</style>